import React, {
  Component,
  PropTypes,
} from 'react';
import {
  StyleSheet,
  Text,
  Animated,
  ActivityIndicator,
  Dimensions,
  Platform,
  View,
  TextInput,
} from 'react-native';

const Screen = Dimensions.get('window');

const propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
  type: PropTypes.string,
  errorText: PropTypes.string,
  tipText: PropTypes.string,
};

const defaultProps = {
  width: 290,
  height: 44,
  type: '', // 密码框类型
  errorText: '', // 错误信息
  tipText: '', // 提示信息
};

class PasswordInput extends Component {
  constructor(props) {
    super(props);

    this.state = {
      password: '',
      tipText: props.tipText || '', // 提示文案
      errorText: '', // 错误文案
      opacityValue: new Animated.Value(this.props.minOpacity),
    };

    this.password = '';
    this.password_confirm = ''; // 只有在某些特殊情况下才能用到
  }

  componentWillReceiveProps(nextProps) {
    let {errorText} = nextProps;
    if (errorText){
        this.setState({errorText});
    }

  }

  onChangeText = (password) => {
      let {type,callbackFn} = this.props;
      // 过滤掉非数字字符
      if(password && !/^\d{0,}$/.test(password)){
          return;
      }
      this.setState({password});

      // 如果是设置提现密码逻辑
      if (type == 'SET_WITHDRAW_PASSWORD') {
          if (password.length == 6) {
              if (this.password == '') {
                  this.password = password;
                  this.setState({password:'',tipText:'请再次输入',errorText:''})
              } else if (this.password != password){
                  this.setState({errorText:'两次输入不一致，请重新输入'});
              } else {
                  this.setState({errorText:''});
                  callbackFn && callbackFn(password)
              }
          }
      } else {
          if (type == 'DO_WITHDRAW') {
              if (password.length == 6) {
                  this.setState({errorText:''});
                  callbackFn && callbackFn(password);
              }
          } else {
              this.password = password;
          }
      }
  }

  render() {
    let {width,height,hiddeCursor=false} = this.props;
    let {password,tipText,errorText} = this.state;

    return (
        <View style={styles.passwordInput}>
            <View style={{height:25}}>
                <Text style={styles.tipText}>{tipText}</Text>
            </View>
            <View style={[styles.container,{width,height,paddingTop:0.23 * height,paddingBottom:0.23 * height}]}>
                {[1,2,3,4,5,6].map((item,i)=>(
                    <View key={i} style={[styles.item,{height:0.54 * height,borderRightWidth: i == 5 ? 0 : StyleSheet.hairlineWidth}]}></View>
                ))}
                {password.split('').map((item,i)=>(
                    <View key={i} style={[styles.dot,{position:'absolute',top:height / 2 - 4,left:(i + 1 / 2) * width / 6 - 4}]}></View>
                ))}
                <TextInput caretHidden={hiddeCursor} secureTextEntry={true} style={[styles.input,{width,height,fontSize:0}]} underlineColorAndroid={'#ffffff'} maxLength={6} onChangeText={this.onChangeText} value={password} keyboardType="numeric" autoFocus={true}/>
            </View>
            <View style={{height:25,paddingTop:5}}>
                <Text style={styles.errorText}>{errorText}</Text>
            </View>
        </View>
    );
  }
}

PasswordInput.propTypes = propTypes;
PasswordInput.defaultProps = defaultProps;

const styles = StyleSheet.create({
  passwordInput: {

  },
  tipText: {
    fontSize: 14,
    color: '#7B7B7B',
  },
  errorText: {
    fontSize: 13,
    color: '#F5615F',
  },
  container: {
      alignItems: 'center',
      backgroundColor: 'white',
      justifyContent: 'center',
      flexDirection: 'row',
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: '#ddd',
  },
  item: {
      flex: 1,
      borderRightWidth: StyleSheet.hairlineWidth,
      justifyContent: 'center',
      alignItems: 'center',
      borderRightColor: '#ddd'
  },
  dot: {
      borderRadius: 4,
      borderWidth: 4,
      backgroundColor: '#565656'
  },
  input: {
      position: 'absolute',
      letterSpacing: 5,
      fontSize: 20
  },
  containerT:{
      position: 'absolute',
      width: Screen.width,
      height: Screen.height,
      top:0,
      left:0,
      zIndex: 10
  },
  message: {
    color: '#555555',
    fontSize: 15,
    textAlign: 'center',
  },
});

export default PasswordInput;
